<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title></title>
  <style>
    .box{
      width: 1000px;
      margin:100px auto;
    }

    .box>div{
      width: 300px;
      height: 150px;
      border: 1px solid #000;
      background-color: pink;
      float: left;
      margin-right:20px;
    }
    
    .box>div:nth-child(2){
      background-color: red;
      /*过渡*/
      transition:all 1s;
    }

    .box>div:hover:nth-child(2){
      /*width: 600px;*/
      /*
        transform:scale(x,y); 缩放
         如果只有一个值 会等比例缩放
         大于1 放大
         小于1 缩小
         不能使用吧百分比

      */
      transform: scale(2);

      /*transform:scale(50%);*/
    }
  </style>
</head>
<body>
  <div class="box">
    <div></div>
    <div></div>
    <div></div>
  </div>
</body>
</html>